<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Query } from '@/api/index'
import { useMessage } from '@/hooks/useMessage'

const message = useMessage()

const isCollapsed = ref(true)
const toggleCollapsed = () => {
  isCollapsed.value = !isCollapsed.value
}

const menuList = ref([])

const router = useRouter()
const selectedIndex = ref()
const selectItem = (item: any) => {
  selectedIndex.value = item.id
  //用jobType找到groupName
  const {id, label, value: jobType } = item
  // 查找匹配的父元素
  const menuParent = menuList.value.filter((parent: any) =>
    parent.jobType.some((child: any) => child.id === id)
  ) as any
  const groupName = menuParent.length && menuParent[0].value
  router.push({ name: item.template, query: { groupName, jobType, label } })
}

const getMenuList = async () => {
  const res = (await Query({ inputStr: 'operType=GetMenu' })) as any
  if (res.code !== 200) {
    message.error(res.msg)
    return
  }
  menuList.value = res.data.menuInfo.groupName || []
}

onMounted(() => getMenuList())
</script>
<template>
  <div v-if="isCollapsed" class="menu-closed" @click="toggleCollapsed"></div>
  <div v-if="!isCollapsed" class="menu-opened">
    <p class="menu-title" @click="toggleCollapsed">看板中心系统</p>
    <div class="menu">
      <div v-for="item in menuList" :key="item.id" class="menu-item">
        <p class="menu-item-title">{{ item.label }}</p>
        <template></template>
        <div class="sub-menu-item">
          <p
            v-for="subItem in item.jobType"
            :key="subItem.id"
            :class="['flex', 'content-center', { selected: selectedIndex === subItem.id }]"
            @click="selectItem(subItem)"
          >
            <img class="menu-icon" src="@/assets/menu-icon.png" />{{ subItem.label }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.menu-opened {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  padding: 16px;
  background: #040d4c;
  box-shadow: 0px 4px 10px 0px #8fe1ff;
  border-radius: 0px 0px 0px 0px;
  border: 0px solid #00aeff;
  .menu-title {
    position: relative;
    font-size: 24px;
    color: #3176ff;
    font-weight: 700;
    margin-bottom: 32px;
    &:after {
      display: block;
      content: '';
      width: 38px;
      height: 33px;
      position: absolute;
      right: 0;
      top: 0;
      background: url('@/assets/menu-collapsed.png') no-repeat center center;
      background-size: 50%;
      cursor: pointer;
    }
  }
  .menu-item {
    margin-bottom: 18px;
  }
  .menu-item-title {
    padding-left: 16px;
    font-size: 22px;
    color: #9ca3af;
  }
  .sub-menu-item {
    p {
      padding-left: 16px;
      height: 40px;
      font-size: 20px;
      line-height: 40px;
      cursor: pointer;
    }
    .selected {
      background: rgba(49, 118, 255, 0.1);
    }
  }
  .menu-icon {
    width: 24px;
    object-fit: contain;
    margin-right: 14px;
  }
}
.menu-closed {
  position: absolute;
  top: 50%;
  margin-top: -100px;
  left: 0;
  margin-left: -23px;
  z-index: 999;
  width: 46px;
  height: 211px;
  background: url('@/assets/menu-closed.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
}
</style>
